<template>
    <view class="content" :style="[pageStyle]">
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="not-diy" v-if="notDiy">
            <u-empty
                    :icon="uEmpty.page"
                    text="模版未找到"
            >
            </u-empty>
        </view>
        <view v-else>
            <view :style="[intoStyle]">
                <block  v-for="(item,index) in list.content" :key="index">
                    <wlk-navbar v-if="item.type=='topNav'" :title="item.params.title" :leftIconColor="item.style.titleColor" :leftColor="item.style.titleColor" :fontColor="item.style.titleColor" :transparentTitleColor="item.style.titleColor" :bgColor="item.style.navColor" :scrollTop="scrollTop" :navbarType="item.params.mode=='into'?5:0"></wlk-navbar>
                    <wlk-image v-if="item.type=='image'" :item="item" :systemInfo="systemInfo"></wlk-image>
                    <wlk-notice v-if="item.type=='notice'" :item="item"></wlk-notice>
                    <wlk-search v-if="item.type=='search'" :item="item" :scrollTop="scrollTop"  :borderHeight="borderHeight"></wlk-search>
                    <wlk-text v-if="item.type=='text'" :item="item"></wlk-text>
                    <wlk-blank v-if="item.type=='blank'" :item="item"></wlk-blank>
                    <wlk-border v-if="item.type=='border'" :item="item"></wlk-border>
                    <wlk-nav v-if="item.type=='nav'" :item="item" :systemInfo="systemInfo"></wlk-nav>
                    <wlk-magic v-if="item.type=='magic'" :item="item" :systemInfo="systemInfo"></wlk-magic>
                    <wlk-line @doneWaterFall="setWaterFallHeight" v-if="item.type=='line'" :item="item"  :borderHeight="borderHeight"></wlk-line>
                    <wlk-end  @doneWaterFall="setWaterFallHeight" v-if="item.type=='end'" :item="item" :scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-end>
                    <wlk-tag  @doneWaterFall="setWaterFallHeight" v-if="item.type=='tag'" :item="item" :scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-tag>
                    <wlk-note  @doneWaterFall="setWaterFallHeight" v-if="item.type=='note'" :item="item" :borderHeight="borderHeight"></wlk-note>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
    var _self;
    import share from "@/wlkutils/share";
    export default {
        components: {},
        data() {
            return {
                list:{},
                scrollTop:0,
                pageStyle:{
                    backgroundColor: ''
                },
                intoStyle:{
                    paddingTop:''
                },
                systemInfo : uni.getSystemInfoSync(),
                notDiy:false,
                borderHeight:0,
                id:0
            }
        },
        onLoad() {
            _self = this;
            this.id = this.$Route.query.id;
        },
        onShow() {
            _self.list = {};
            _self.getData();
        },
        onShareAppMessage(res){
            let data = new Object();
            data.params = {id:this.id};
            return share.setShareInfo(data);
        },
        onPageScroll : function(e) {
            _self.scrollTop = e.scrollTop;
        },
        methods: {
            getData(){
                uni.$u.http.post('diy/getDiyPage', {
                    windowWidth: _self.systemInfo.windowWidth,
                    type:'custom',
                    id:this.id
                }).then(res => {
                    if(res.data){
                        _self.initShareInfo();
                        _self.list = res.data;
                        _self.pageStyle.backgroundColor = _self.list.content[0].style.bgColor;
                        this.notDiy = false;
                    }else{
                        this.notDiy = true;
                    }
                }).catch(res => {

                })
            },
            initShareInfo(){
                let data = new Object();
                data.params = {id:_self.id};
                return share.setShareInfo(data);
            },
            setWaterFallHeight(height){
                this.borderHeight = height;
            },
        }
    }
</script>

<style lang='scss'>
    page{
        width: 100%;
        height: auto;
        .content{
            width: 100%;
            height: 100%;
            .not-diy{
                margin-top: 30%;
            }
        }
    }

</style>
